@baseFontSize: 75; //基于视觉稿横屏尺寸/100得出的基准font-size
.px2rem(@name, @px) {
    @{name}: @px / @baseFontSize * 1rem;
}

.flex(@a, @b, @c) {
   flex: @a @b @c/@baseFontSize*1rem;
}

.b-radius(@px){
  border-radius: @px / @baseFontSize * 1rem;
}

.h(@px){
    height: @px / @baseFontSize * 1rem;
}

.w(@px){
  width: @px / @baseFontSize * 1rem;
}

.mt(@px){
  margin-top: @px / @baseFontSize * 1rem;
}

.mb(@px){
  margin-bottom: @px / @baseFontSize * 1rem;
}

.ml(@px){
  margin-left: @px / @baseFontSize * 1rem;
}

.mr(@px){
  margin-right: @px / @baseFontSize * 1rem;
}

.pt(@px){
  padding-top: @px / @baseFontSize * 1rem;
}

.pb(@px){
  padding-bottom: @px / @baseFontSize * 1rem;
}

.pl(@px){
  padding-left: @px / @baseFontSize * 1rem;
}

.pr(@px){
  padding-right: @px / @baseFontSize * 1rem;
}

.padding(@tbpx,@lrpx){
  padding: @tbpx / @baseFontSize * 1rem @lrpx / @baseFontSize * 1rem;
}

.padding-rl(@rightpx,@leftpx){
  padding:0rem  @rightpx/@baseFontSize*1rem 0rem @leftpx/@baseFontSize*1rem;
}

.margin(@tbpx,@lrpx){
  margin: @tbpx / @baseFontSize * 1rem @lrpx / @baseFontSize * 1rem;
}

.border-1px(@color) {
  position: relative;
  &:after {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 1/@baseFontSize*1rem solid @color;
    content: ' '
  }
}
.border-2px(@color) {
  position: relative;
  &:after {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 2/@baseFontSize*1rem solid @color;
    content: ' '
  }
}
.border-right-1px(@px,@color) {
  position: relative;
  &:after {
    display: block;
    position: absolute;
    right: 1/@baseFontSize*1rem;;
    bottom: 0;
    width: @px/@baseFontSize*1rem;
    top: 0;
    background-color: @color;
    content: ' ';
  }
}
.border-before-1px(@color) {
  position: relative;
  &:before {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-top: 1/@baseFontSize*1rem solid @color;
    content: ' '
  }
}
.border-before-2px(@color) {
  position: relative;
  &:before {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-top: 2/@baseFontSize*1rem solid @color;
    content: ' '
  }
}
.border-npx(@color,@height) {
  position: relative;
  &:after {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: @height/@baseFontSize*1rem solid @color;
    content: ' '
  }
}

.border-none() {
  &:after {
    display: none;
  }
}

.border-solid (@bw,@color) {
  border: @bw/@baseFontSize*1rem solid @color;
}
.border-bottom (@bw,@color) {
  border-bottom: @bw/@baseFontSize*1rem solid @color;
}

.lh(@px){
  line-height: @px / @baseFontSize * 1rem;
}

.fs(@px){
  font-size: @px / @baseFontSize * 1rem;
}

.ellipsis2(){
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.top(@px){
  top: @px / @baseFontSize * 1rem;
}
.left(@px){
  left: @px / @baseFontSize * 1rem;
}
.bottom(@px){
  bottom: @px / @baseFontSize * 1rem;
}
.right(@px){
  right: @px / @baseFontSize * 1rem;
}
.ellipsis() {
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  word-wrap: break-word;
}
.mh(@px){
  min-height: @px / @baseFontSize * 1rem;
}

.wordspacing(@px){
  word-spacing: @px / @baseFontSize * 1rem;
}
